<template>
  <view class="normal-login-contatiner">
    <view class="logo-content align-center justify-center flex">
      <image style="width: 100rpx;height: 100rpx;" src="/static/logo.png" mode="widthFix"></image>
      <text class="title"> Fits移动端登录</text>
    </view>
    <view class="login-form">
      <view class="input-item flex align-center">
        <image src="@/static/images/user.png" style="width: 30px;height: 25px;margin-left: 10px;"></image>
        <input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30"/>
      </view>
      <view class="input-item flex align-center">
        <image src="@/static/images/password.png" style="width: 30px;height: 25px;margin-left: 10px;"></image>
        <input v-model="loginForm.password" class="input" type="password" placeholder="请输入密码" maxlength="30"/>
      </view>
      <view class="input-item flex align-center" style="width: 60%; margin: 0px;" v-if="captchEnabled">
        <image src="@/static/images/captch.png" style="width: 30px;height: 25px;margin-left: 10px;"></image>
        <input v-model="loginForm.code" class="input" type="text" placeholder="请输入验证码" maxlength="5"/>
        <view class="login-code">
          <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
        </view>
      </view>
      <view class="action-btn">
        <button @click="handleLogin" type="primary" style="border-radius: 25px;margin-top: 40px;">登录</button>
      </view>
    </view>
  </view>
</template>

<script>
import { getToken } from "@/utils/auth"

export default {
  data() {
    return {
      captchEnabled: true,
      loginForm: {
        username: "lzy",
        password: "123456",
        code: "1",
      },
      codeUrl: "",

    }
  },
  created() {
  },
  methods: {
    getCode() {

    },
    async handleLogin() {
      if (this.loginForm.username === "") {
        uni.showToast({
          title: "请输入账号",
          icon: "none"
        })
      } else if (this.loginForm.password === "") {
        uni.showToast({
          title: "请输入密码",
          icon: "none"
        })
      } else if (this.loginForm.code === "") {
        uni.showToast({
          title: "请输入验证码",
          icon: "none"
        })
      }else{
		  uni.showLoading({
		  	title: "登录中，请耐心等待..."
		  })
		  var data = {
		    username: this.loginForm.username,
		    password: this.loginForm.password,
		    uuid: this.loginForm.uuid
		  }
		  this.$store.dispatch("Login", data).then(res => {
		    //去掉加载条
        uni.hideLoading()
		    this.$store.dispatch("GetUserInfo").then(res=> {
		     uni.reLaunch({
		     	url:"/pages/home"
		     })
		    })
		  }).catch(() => {
		    console.log("我登录失败了")
		  })
	  }
    }
  }
}
</script>

<style lang="scss">


page {
  background-color: #ffffff;
}

.normal-login-contatiner {
  width: 100%;

  .logo-content {
    width: 100%;
    font-size: 21px;
    text-align: center;
    padding-top: 15%;

    image {
      border-radius: 4px;
    }

    .title {
      margin-left: 10px;
    }
  }

}

.login-form {
  width: 80%;
  margin: 20px auto;
  text-align: center;
  margin-top: 15%;

  .input-item {
    margin: 20px auto;
    background-color: #f5f6f7;
    height: 45px;
    border-radius: 20px;
  }

  .icon {
    font-size: 38rpx;
    margin-left: 10px;
    color: #999;
  }

  .input {
    width: 100%;
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    padding-left: 15px;
  }

  .login-code {
    height: 38px;
    float: right;

    .login-code-img {
      height: 38px;
      position: absolute;
      margin-left: 10px;
      width: 200rpx;
    }
  }
}
</style>
